<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <multiInput ref="multiInputRef" class="w-50" v-model="form.tracking_number" placeholder="快递单号"></multiInput>
        <el-select class="selectClass" v-model="form.warehouse_id" placeholder="仓库" filterable clearable multiple
          collapse-tags>
          <el-option v-for="item in wareDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <el-select class="selectClass" v-model="form.receive_status" placeholder="收货状态" multiple collapse-tags clearable>
          <el-option v-for="item in options['stockin.receiveOrder']?.[0].detailReceiveStatus" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select class="selectClass" v-model="form.stock_method" placeholder="备货方式" multiple collapse-tags clearable>
          <el-option v-for="item in options['stockin.receiveOrder']?.[0].stockMethod" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select class="selectClass w-30" v-model="form.urgent_status" placeholder="是否加急" clearable>
          <el-option v-for="item in options['stockin.receiveOrder']?.[0].detailQcStatus" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select class="w-30" v-model="form.sign_status" placeholder="是否签收" multiple collapse-tags clearable>
          <el-option v-for="item in options['stockin.receiveOrder']?.[0].signStatus" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 120px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()"
            style="max-width: 300px" />
        </VGroup>
        <multiInput class="w-50" v-model="form.receipt_number" placeholder="采购单号"></multiInput>
        <multiInput class="w-50" v-model="form.sku" placeholder="SKU/自定义SKU"></multiInput>
      </template>
      <template #toolbar_btns>

        <el-button @click="handleExport()"><svg-icon icon-class="import" />导出</el-button>
        <div class="flex ml-auto">
          <div class="mr-3 flex items-center cursor-pointer" v-for="(item, index) in tabList" :key="index"
            @click="handleOvertime(item)">
            <span class="total-round mr-1"></span><span class="text-[#666666]">
              {{ item.label }} ：</span><span class="text-lg text-[#3487FF]">{{ item.count }}</span>
          </div>
        </div>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" @query="query"></ComModal>
    <VLog ref="logRef" class="dialogPublic" type="operation" :api="getListLog" options="receipt_number"></VLog>
    <comDown ref="comDownRef" :options="options"></comDown>
    <comOvertime ref="comOvertimeRef"></comOvertime>
    <derived-center ref="DerivedCenterRef"></derived-center>
  </VPage>
</template>
<script setup name="StorageReceive-order" lang="jsx">
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs, onMounted } from 'vue'
import { getEnums } from '@/api/public'
import { queryListOrder, getListLog } from './api'
import { getWareData } from '@/api/public'
import comDown from './components/comDown.vue'
import ComModal from './components/ComModal.vue'
import multiInput from '@/components/multiInput';
import VLog from '@/components/VLog'
import comOvertime from './components/comOvertime'

const timeOption = [
  { label: "下单时间", value: "sign_time" },
  { label: "创建时间", value: "create_time" },
  { label: "预计到货时间", value: "estimate_time" },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 'auto' },
  showHeaderOverflow: false,
  showOverflow: false,
  formConfig: {
    data: {
      timeRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'express_json', title: '快递单号', width: 180
    },
    {
      field: 'receipt_number', title: '采购单号', width: 180, slots: {
        default: ({ row }) => {
          return <div class="base-text-color cursor-pointer" onClick={() => showOrderDetail(row.id)}> {row.receipt_number} </div>
        }
      }
    },
    {
      field: 'down_json', title: '下游单号', width: 190, slots: {
        default: ({ row }) => {
          return <div>
            {row.down_json && row.down_json.map(i => {
              return <div class="base-text-color cursor-pointer" onClick={() => showDown(i, row.receipt_number)}>{i}</div>
            })
            } </div>
        }
      }
    },
    {
      field: 'urgent_status_cn', title: '是否加急', width: 120
    },
    {
      field: 'receive_status_cn', title: '收货状态', width: 120
    },
    {
      field: 'sign_status_cn', title: '签收状态', width: 120
    },
    {
      field: 'order_status_cn', title: '单据状态', width: 120
    },
    {
      field: 'order_time', title: '下单时间', width: 180
    },
    {
      field: 'sku_num', title: 'SKU数量', width: 120
    },
    {
      field: 'total_num', title: '产品数量', width: 120
    },
    {
      field: 'estimate_arrival_time', title: '预计到货时间', width: 160
    },
    {
      field: 'platform_order_no', title: '平台单号', width: 180
    },
    {
      field: 'business_type_cn', title: '收货类型', width: 120
    },
    {
      field: 'warehouse_name', title: '收货仓', width: 120
    },
    {
      field: 'stock_method_cn', title: '备货方式', width: 120
    },
    {
      field: 'purchase_user', title: '采购员', width: 120
    },
    {
      field: 'country', title: '国家', width: 120
    },
    {
      field: 'order_time', title: '下单时间', width: 180
    },
    {
      field: 'create_time', title: '创建时间', width: 180
    },
    {
      field: 'order_remark', title: '下单备注', width: 120
    },
    {
      title: '操作', width: "80", fixed: "right", slots: {
        default: ({ row }) => {
          return <div class="table-option">
            <div>
              <el-button type="primary" link class="mr-2" onClick={() => handleLog(row.receipt_number)}>查看</el-button>
            </div>
          </div >
        }
      }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data.list',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryListOrder({ ...form, ...page })
        getCount(res.data)
        if (res.data.list.length == 1 && (res.data.list[0].receive_status == 0 || res.data.list[0].receipt_status == 1)) {
          showOrderDetail(res.data.list[0].id)
        }
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: [],
  wareDataList: [],
  tabList: [
    {
      label: '收货超时',
      key: 'receive_overtime',
      count: 0,
      list: []
    },
    {
      label: '上架超时',
      key: 'receive_overtime',
      count: 0,
      list: []
    },
  ]
})
const { options, wareDataList, tabList } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "stockin.receiveOrder"
    ]
  }).then(res => {
    options.value = res.data
  })
}
provide('options', options)
fetchOption()

// 获取仓库
const getWareDataList = async () => {
  try {
    const res = await getWareData()
    wareDataList.value = res.data
  } catch (e) {
    throw Error(e)
  }
}
provide('wareDataList', wareDataList)
getWareDataList()


const getCount = (data) => {
  tabList.value[0].count = data.receive_overtime.count
  tabList.value[0].list = data.receive_overtime.list
  tabList.value[1].count = data.shelve_overtime.count
  tabList.value[1].list = data.shelve_overtime.list
}


const logRef = ref()
const handleLog = (receipt_number) => {
  logRef.value.open(receipt_number)
}

const DerivedCenterRef = ref()
const handleExport = (val) => {
  let condition = tableRef.value.getQueryForm()
  DerivedCenterRef.value.open({
    id: 56,
    tag_name: 'wms',
    condition
  })
}

// 显示下游单号详情
const comDownRef = ref()
const showDown = (id, receipt_number) => {
  console.log(id)
  comDownRef.value.open(id, receipt_number)
}

// 显示超时
const comOvertimeRef = ref()
const handleOvertime = (row) => {
  comOvertimeRef.value.open(row.label, row.list)
}

// 收货单详情
const ComModalRef = ref()

const showOrderDetail = (id) => {
  ComModalRef.value.open(id)
}

const multiInputRef = ref()
onMounted(() => {
  multiInputRef.value.inputFocus()
})
</script>
<style>
.total-round {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #3487FF;
  border-radius: 50%;
}</style>